<!DOCTYPE HTML>
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html;
                                             charset=utf-8">
    <title>Options</title>
    <script src="/i18n/i18n.js" type="text/javascript"></script>
    <script src="/js/options.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/options.css" type="text/css">
  </head>
  <body onload="init()" >

    <div id="box" >
      <div id="navBar" >
        <h1 i18nT="navbar-title"></h1>
        <ul id="navTags">
          <li id="preferencesTag" class="navTag navTagSel"
              i18nT="navbar-pref"></li>
          <li id="manageRulesTag" class="navTag"
              i18nT="navbar-mngrule"></li>
        </ul>
        <hr />
      </div>

      <div id="main">
        <div id="preferences" class="mainview-sel">
          <h1 i18nT="h1-pref"></h1>
          <section>
            <h3 i18nT="h3-lang"></h3>
            <br />
            <select id="chooseLang">
              <option>English</option>
              <option>简体中文</option>
            </select>
          </section>
          <section>
            <h3 i18nT="h3-amredir"></h3>
            <br />
            <input type="checkbox" id="pref0" class="prefs">
            <span i18nT="pref-autoredir"></span>
            <br />
            <input type="checkbox" id="pref1" class="prefs">
            <span i18nT="pref-manredir"></span>
          </section>
          <section>
            <input type="submit" i18nP="value:pref-savebttn"
                   onClick="savePref()" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" i18nP="value:pref-cancelbttn"
                   onClick="loadPref()" />
            &nbsp;&nbsp;&nbsp;&nbsp;
          </section>
        </div>

        <div id="manageRules" class="mainview">
          <h1 i18nT="h1-mngrule"></h1>
          <section>
            <h3 i18nT="h3-rulelist"></h3>
            <table id="ruleListTable">
              <tr>
                <th i18nT="table-name"></th>
                <th i18nT="table-white"></th>
                <th i18nT="table-black"></th>
                <th i18nT="table-substr"></th>
                <th i18nT="table-repl"></th>
              </tr>
            </table>

            <input type="button" i18nP="value:bttns-add"
                   onClick="ruleList.add()" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" i18nP="value:bttns-edit"
                   onClick="ruleList.edit()" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" i18nP="value:bttns-del"
                   onClick="ruleList.del()" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" i18nP="value:bttns-up"
                   onClick="ruleList.moveUp()" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" i18nP="value:bttns-down"
                   onClick="ruleList.moveDown()" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" i18nP="value:bttns-addToManList"
                   onClick="manRedirList.add()" />
            <br />
          </section>
          <section>
            <h3 i18nT="h3-manredir"></h3>
            <br />
            <select id="manRedirSel">
            </select>
            <br />
            <input type="button" i18nP="value:manredir-rm"
                   onClick="manRedirList.del()" />
            <br />
          </section>
        </div>
      </div>
    </div>

    <div id="frontLayer">
      <form id="form">
        <section>
          <select id="chooseRule">
            <option i18nT="op-edit"></option>
            <option i18nT="op-http2https"></option>
            <option i18nT="op-appques"></option>
            <option i18nT="op-googlecache"></option>
            <option i18nT="op-sixxs"></option>
          </select><br />

          <label i18nT="lb-name"></label>
          <input type="text" id="input0" class="input-text" />
          <br />
          <label i18nT="lb-white"></label>
          <input type="text" id="input1" class="input-text" />
          <br />
          <label i18nT="lb-black"></label>
          <input type="text" id="input2" class="input-text" />
          <br />
          <label i18nT="lb-substr"></label>
          <input type="text" id="input3" class="input-text" />
          <br />
          <label i18nT="lb-repl"></label>
          <input type="text" id="input4" class="input-text" />
          <br />
          <label i18nT="lb-testurl"></label>
          <input type="text" id="input5" class="input-text" />
          <br />
        </section>
        <section>
          <input type="button" i18nP="value:edit-save"
                 onClick="ruleList.save()" />
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input type="button" i18nP="value:edit-discard"
                 onClick="ruleList.restore()" />
        </section>
      </form>
    </div>

    <div id="backLayer">
    </div>
  </body>
</html>
